<template>
  <epgis-nav-container title="登 陆" isBackBtnVisiable="false">
    <template #container>
      
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <div class="layoutHorizontal layoutPlatform">
          <img src="@/assets/icon/mine/cat.png" class="imgLogo"/>
          <div class="layoutVerticle layoutIntroduce">
            <span class="txtPlatform">缘来</span>
            <span class="txtIntroduce">优质靠谱青年的交友平台</span>
          </div>
        </div>
        <div class="layoutVerticle" style="margin-left: 10%;margin-right: 10%;margin-top: 20px; border: 1px solid #fafafa;border-radius: 10px;background: #fafafa; padding: 10px 10px;">
          <div class="layoutHorizontal" style="align-items: center;">
            <img src="@/assets/icon/login/green.png"  style="height: 16px;  width: 16px;"/>
            <span style="margin-left: 10px;font-weight: bold; font-size: 14px;">单身优质青年的聚集地</span>
          </div>
          <span style="margin-top: 3px;font-size: 11px;margin-top: 6px;">每日限量推荐靠谱优质异性，相互喜欢即可添加微信沟通</span>
        </div>

        <div class="layoutVerticle" style="margin-left: 10%;margin-right: 10%;margin-top: 10px; border: 1px solid #fafafa;border-radius: 10px;background: #fafafa; padding: 10px 10px;">
          <div class="layoutHorizontal"  style="align-items: center;">
            <img src="@/assets/icon/login/red.png"  style=" height: 16px;width: 16px;"/>
            <span style="margin-left: 10px;font-weight: bold;font-size: 14px;">真实社交拒绝虚假</span>
          </div>
          <span style="margin-top: 3px;font-size: 11px;margin-top: 6px;">每个人都经过人工资料审核+实名学历双重认证才能交友</span>
        </div>

        <div class="layoutVerticle" style="margin-left: 10%;margin-right: 10%;margin-top: 10px; border: 1px solid #fafafa;border-radius: 10px;background: #fafafa; padding: 10px 10px;">
          <div class="layoutHorizontal"  style="align-items: center;">
            <img src="@/assets/icon/login/yellow.png"  style="height: 16px;width: 16px;"/>
            <span style="margin-left: 10px;font-weight: bold;font-size: 14px;">100%隐私安全</span>
          </div>
          <span style="margin-top: 3px;font-size: 11px;margin-top: 6px;">数据加密存储保障信息安全，不会泄露你的任何隐私信息</span>
        </div>

        <div class="layoutHorizontal layoutCenter inputBorder"  style="margin-left: 12%;margin-right: 12%;margin-top: 25px;">
          <img src="@/assets/icon/login/account.png"  style=" height: 20px;"/>
          <van-field v-model ='mobile' label="" type="textarea" rows="1" autosize="" placeholder="请输入手机号码" style="margin-left: 10px;">
          </van-field>
        </div>
        <div class="layoutHorizontal layoutCenter inputBorder"  style="margin-left: 12%;margin-right: 12%;">
          <img src="@/assets/icon/login/password.png"  style=" height: 20px;"/>
          <van-field  v-model ='password' label="" :type="pswType" rows="1" autosize="" placeholder="请输入密码"  style="margin-left: 10px;">
          </van-field>
          <img @click="changePasswordType" :src="pswType =='password' ? eyeClose : eyeOpen"  style=" height: 20px;width: 20px;"/>
        </div>

        <div class="layoutHorizontal"  style="margin-left: 12%;margin-right: 12%;margin-top: 12px;">
          <span @click="register" style="color: #3676F5; flex: auto;font-size: 14px;">注册</span>
          <span @click="forgetPassword" style="color: #3676F5; font-size: 14px;">忘记密码</span>
        </div>

        <van-button @click="userLogin" type="primary" style="margin-left: 12%; margin-right: 12%;margin-top: 25px;border-radius: 8px;height: 40px;" >
          登 陆
        </van-button>

        <div class="layoutHorizontal"  style="margin-left: 12%;margin-right: 12%;margin-top: 20px;align-items: center;">
          <van-checkbox v-model="isChecked" :icon-size ="17"></van-checkbox>
          <span style="font-size: 13px;margin-left: 3px;">已阅读并同意</span>
          <span @click="gotoUserAgreement" style="color: #3676F5; font-size: 13px;">《用户协议》</span>
          <span style=" font-size: 13px;">和</span>
          <span @click="gotoPrivacyAgreement" style="color: #3676F5; font-size: 13px;">《隐私协议》</span>
        </div>
        
      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
export default {
  components: {},
  data() {
    return {
      mobile:'',
      password:'',
      isChecked: true,
      pswType:'password',
      eyeOpen: require('@/assets/icon/login/eye_open.png'),
      eyeClose: require('@/assets/icon/login/eye_close.png'),
      operationType:'',
      inviter:'',
    };
  },

  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    next((vm) => {
      console.log("进入页面，路径from：" + from.path);
      console.log("进入页面，路径to：" + to.path);
    });
  },


  mounted() {

    var userContextStr = localStorage.getItem('userContextStr');
    if(userContextStr){
      var userInfo = JSON.parse(userContextStr);
      this.mobile =  userInfo['mobile'];
      this.password =  userInfo['password'] ;
      this.submitLogin();
    }
    this.operationType = this.$route.query.operationType;
    this.inviter = this.$route.query.inviter;
    console.log("操作类型：" + this.operationType);
    console.log("分享id：" + this.inviter);

  },
  destroyed() {
  },
  activated() {
  },
  methods: {

    exitApp() {
      var pluginParams = {};
      navigator.locationSGService.exitApp(
        (msg) => {
          console.log('成功，退出应用：' , msg);
        },
        (msg) => {
          console.log('失败，退出应用：' + JSON.stringify(msg));
        },
        pluginParams);
    },

    register() {
      //后面改为加密算法
      if(this.inviter){
        sessionStorage.setItem("operationType", this.operationType);
        sessionStorage.setItem("inviter", this.inviter);
      }
      this.$router.push({ name: 'RegisterPhone' });
    },


    userLogin() {
      if(this.checkValue()){
        this.submitLogin();
      }
    },

    checkValue(){
      if(!this.isChecked){
        Notify({
            type: "danger",
            message: "请阅读并同意《用户协议》和《隐私协议》",
        });
        return false;
      }
      if (!this.mobile) {
        Notify({
            type: "danger",
            message: "请输入手机号码",
        });
        return false;
      } 
      if (!this.password) {
        Notify({
            type: "danger",
            message: "请输入登陆密码",
        });
        return false;
      } 
      return true;
    },

    submitLogin(){
      let that = this
      Http.instance()
        .postJSON({
          url: "/makeFriends/app/login",
          params: {
            mobile: this.mobile,
            password: this.password,
          },
        })
        .then((result) => {
          console.log("登陆返回：" + JSON.stringify(result));
          var userInfo = {};
          userInfo['mobile'] = this.mobile;
          userInfo['password'] = this.password;
          userInfo['token'] = result['token'];
          localStorage.setItem("userContextStr", JSON.stringify(userInfo));
          // this.$router.push({ name: 'Home' });
          this.$router.replace({ name: 'MainPage' });
        }).catch((result) =>{
          console.log("错误信息：" + result);
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },

    forgetPassword(){
      this.$router.push({ name: 'forgetPassword' });
    },

    changePasswordType(){
      if(this.pswType == 'password'){
        this.pswType = 'textarea';
      }else {
        this.pswType = 'password';
      }
      console.log("密码类型：" + this.pswType);
    },

    gotoUserAgreement(){
      this.$router.push({ name: 'UserAgreement' });
    },

    gotoPrivacyAgreement(){
      this.$router.push({ name: 'PrivacyAgreement' });
    },






    









    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }

  .layoutPlatform{
    margin-top: 30px;
    margin-left: 10%;
    margin-right: 10%;
  }

  .imgLogo{
    width: 70px;
    border-radius: 10px;
  }

  .layoutIntroduce{
    margin-left: 10px;
  }

  .txtPlatform{
    font-size: 19px;
    font-weight: bold;
  }

  .txtIntroduce{
    font-size: 15px;
    font-weight: bold;
    margin-top: 12px;

  }
  .inputBorder{
    position: relative;
    padding: 8px 0px;
    &::after{
      position: absolute;
      box-sizing: border-box;
      content: '';
      pointer-events: none;
      bottom: 0%;
      border-bottom: 1px solid #ebedf0;
      width: 100%;
    }
  }

  /deep/.van-cell {
    padding: 0px 0px;
  }

  .van-cell::after {
    border-bottom: none;
  }






</style>